@matrix-background-color: #f7f9fcff;
@matrix-border-color: #949aa74d;
@item-background-color: #ffffff;
@item-font-color: #1c1d22;
@item-active-color: #0b6fd6ff;

.ip-matrix {
  height: 100%;

  &-sider {
    border-right: 1px solid @matrix-border-color;

    .ant-layout-sider-children {
      background-color: @matrix-background-color;
    }

    &-title {
      height: 60px;
      line-height: 40px;
      padding: 10px;
      display: flex;
      background-color: @matrix-background-color;
      justify-content: space-between;
      border-bottom: 1px solid @matrix-border-color;

      div:first-child {
        color: @item-font-color;
        font-weight: bold;
        font-size: 1.2em;
      }

      div:nth-child(2) {
        color: #999ea8ff;
      }
    }

    &-list {
      background-color: @matrix-background-color;
      max-height: 830px;
      overflow: auto;

      &-item {
        padding: 10px;
        margin: 5px;
        background-color: @item-background-color;
        border-radius: 5%;

        .ant-list-item-meta-title {
          font-size: 15px;
          font-weight: bold;
        }
      }

      .active-item {
        .ant-list-item-meta-title {
          color: @item-active-color;
        }

        svg {
          font-size: 16px;
          color: rgba(11, 111, 214, 0.75);
        }
      }
    }
  }

  &-content {
    .ant-layout-header {
      height: 60px;
      background-color: @item-background-color;
      color: @item-font-color;
      padding: 0 20px;
      border-bottom: @matrix-border-color solid 1px;
      display: flex;
      justify-content: space-between;

      & :first-child {
        h3 {
          display: inline-block;
        }

        span {
          margin-left: 10px;
          padding-left: 10px;
          border-left: 1.5px solid @matrix-border-color;
          color: rgba(30, 30, 32, 0.5);
        }

        span:last-child {
          color: @item-font-color;
        }
      }

      button {
        margin-left: 20px;
      }
    }
  }

  .ant-layout-sider {
    margin: 0;
    padding: 0;
    color: @item-font-color;
    background-color: @item-background-color;
  }
}

.hidden-item {
  visibility: hidden;
}
